<template>
    <div class="NumbeRFMaintenMZZJJZ">
        <div class="pubBig standard ">
            <div class="h0">
                <p class="lt">成本核算分析</p>
            </div>

            <el-row class="selectTime" style="padding: 6px">

                <el-col :span="4">
                    <span>机构：</span>
                    <el-tooltip :disabled="disabledTooltip" style="width: 180px!important;" effect="dark"
                                :content="selectZZJGNames" placement="top">

                        <el-select v-model="selectZZJGNames" placeholder="请选择机构"
                                   style="width: 180px;text-overflow: ellipsis;"
                                   show-overflow-tooltip ref="selectReport">
                            <el-option style="width: 380px;height:200px;overflow: auto;background-color:#fff">
                                <el-tree
                                        v-if="false"
                                        :data="ZZJGList"
                                        :check-strictly="true"
                                        :props="defaultProps"

                                        node-key="id"
                                        show-checkbox
                                        @node-click="handleNodeClick"
                                        @check="handleCheck"
                                ></el-tree>
                                <el-tree
                                        :data="ZZJGList"
                                        show-checkbox
                                        node-key="id"
                                        ref="treeJG"
                                        :props="defaultProps"
                                        @check="handleCheck"
                                        default-expand-all
                                        :check-strictly="true"
                                        :expand-on-click-node="false">
      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span v-if="false">{{ node.label }}</span>
          <el-dropdown @command="handleCommand">
             <span class="el-dropdown-link">
                  {{ node.label }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
             <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item :command="beforeHandleCommand(0, data,'本机构')">本机构</el-dropdown-item>
                  <el-dropdown-item :command="beforeHandleCommand(0, data,'本机构及下属机构')">本机构及下属机构</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
      </span>
                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-tooltip>
                </el-col>
                <el-col :span="2">
                    <Button type="primary" icon="ios-search" @click="setSelectQK">清空</Button>
                </el-col>
                <el-col :span="4">
                    <el-date-picker type="date" placeholder="Select date" @change="getDataList()" style="width: 200px"
                                    v-model="queryDataObj.BeginDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-col>
                <el-col :span="1" style="color: #348EED;font-size: 16px;text-align:center;padding: 6px">至</el-col>
                <el-col :span="4">
                    <el-date-picker type="date" placeholder="Select date" @change="getDataList()" style="width: 200px"
                                    v-model="queryDataObj.EndDate"
                                    value-format="yyyy-MM-dd"
                    ></el-date-picker>
                </el-col>
                <el-col :span="2">
                    <Button type="primary" @click="getDataList()" icon="ios-search">搜索</Button>
                </el-col>
            </el-row>
             <el-row>
                <el-col :span="12">
                    <div id="container" style="height: 300px;"></div>
                </el-col>

                <el-col :span="12">
                    <div id="container4" style="height: 300px;"></div>
                </el-col>

            </el-row>
             <el-row>
                <i-col span="24" style="height: 2px;background: #5c6b77;margin:  22px"></i-col>
            </el-row>

             <el-row>

                <el-col :span="24">
                    <div id="container7" style="height: 300px;"></div>
                </el-col>


            </el-row>
        </div>
    </div>
</template>
<script>
    import echarts from 'echarts'

    export default {
        name: "Bedinformation",
        data() {
            return {//定义全局变量
                time:'2019-08-24',
                time2:'2019-08-25',
                barData: {
                    Mon: 13253,
                    Tue: 34235,
                    Wed: 26321,
                    Thu: 12340,
                    Fri: 24643,
                    Sat: 1322,
                    Sun: 1324
                },
                /************************************************/
                selectZZJG: {
                    name: ""
                },
                selectZZJGNames: "",
                selectZZJGIDList: [],
                ZZJGList: [

                ],
                defaultProps: {
                    children: 'childs',
                    label: 'name'
                },
                disabledTooltip:true,
                queryDataObj: {
                    BeginDate: "",
                    EndDate: "",
                    Hospitals: []
                },
            }
        },
        methods: {
            showTooltip(){
                console.log("数据111111111122222")
                const lifeW = this.selectZZJGNames;
                console.log(lifeW)
                console.log(lifeW.length)
                this.disabledTooltip = lifeW.length < 20
                console.log( this.disabledTooltip)
            },
            beforeHandleCommand(index, row, command) {
                return {
                    'index': index,
                    'row': row,
                    'command': command
                }
            },
            handleCommand(command) {
                switch (command.command) {
                    case "本机构"://本机构
                        console.log("本机构@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@");
                        console.log(command.row)
                        this.selectBJG(command.row)
                        break;
                    case "本机构及下属机构"://本机构及下属机构
                        this.selectAllJG(command.row)
                        break;

                }
            },
            setSelectQK() {
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                this.$refs.treeJG.setCheckedKeys([]);
            },
            selectBJG(data) {
                console.log("选中本机构")
                console.log(data)
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                var isCZ = false
                this.selectZZJGIDList.forEach(m => {
                    if (m.id == data.id) {
                        isCZ = true
                    }
                })
                if (isCZ == false) {
                    var obj = {
                        id: data.id,
                        name: data.name
                    }
                    this.selectZZJGIDList.push(obj)
                    var keys = [];
                    this.selectZZJGNames = ""
                    this.selectZZJGIDList.forEach(m => {
                        keys.push(m.id)
                        this.selectZZJGNames += m.name + ","
                    })
                    console.log("选中机构打勾")
                    this.$refs.treeJG.setCheckedKeys(keys);
                }
            },
            selectAllJG(data) {
                console.log("选中本机构")
                console.log(data)
                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                var isCZ = false
                this.selectZZJGIDList.forEach(m => {
                    if (m.id == data.id) {
                        isCZ = true
                    }
                })
                if (isCZ == false) {
                    var obj = {
                        id: data.id,
                        name: data.name
                    }
                    this.selectZZJGIDList.push(obj)
                }
                data.childs.forEach(m => {
                    var isCZ2 = false
                    this.selectZZJGIDList.forEach(n => {
                        if (m.id == n.id) {
                            isCZ2 = true
                        }
                    })
                    if (isCZ2 == false) {
                        var obj = {
                            id: m.id,
                            name: m.name
                        }
                        this.selectZZJGIDList.push(obj)
                    }

                    if (m.childs.length > 0) {
                        m.childs.forEach(m1 => {
                            var isCZ21 = false
                            this.selectZZJGIDList.forEach(n => {
                                if (m1.id == n.id) {
                                    isCZ21 = true
                                }
                            })
                            if (isCZ21 == false) {
                                var obj = {
                                    id: m1.id,
                                    name: m1.name
                                }
                                this.selectZZJGIDList.push(obj)
                            }

                            if (m1.childs.length > 0) {
                                if (m1.childs.length > 0) {
                                    m1.childs.forEach(m11 => {
                                        var isCZ211 = false
                                        this.selectZZJGIDList.forEach(n => {
                                            if (m11.id == n.id) {
                                                isCZ211 = true
                                            }
                                        })
                                        if (isCZ211 == false) {
                                            var obj = {
                                                id: m11.id,
                                                name: m11.name
                                            }
                                            this.selectZZJGIDList.push(obj)
                                        }

                                        if (m11.childs.length > 0) {

                                        }
                                    })
                                }
                            }
                        })
                    }
                })


                var keys = [];
                this.selectZZJGNames = ""
                this.selectZZJGIDList.forEach(m => {
                    keys.push(m.id)
                    this.selectZZJGNames += m.name + ","
                })
                console.log("选中机构打勾")
                this.$refs.treeJG.setCheckedKeys(keys);


            },
            handleNodeClick(data) {
                console.log(data);
                this.$refs.selectReport.blur()
                // this.selectZZJG=data;
                this.selectZZJGNames = data.name
                this.selectZZJGIDList = []
                var obj = {
                    id: data.id
                }
                this.selectZZJGIDList.push(obj)
                this.$refs.treeJG.setCheckedKeys([]);

            },
            handleCheck(checkedNodes, checkedKeys) {
                console.log("选中机构节点1")
                console.log(checkedNodes)
                console.log("选中机构节点2")
                console.log(checkedKeys)
                console.log(checkedKeys.checkedNodes)

                this.selectZZJGNames = "";
                this.selectZZJGIDList = []
                checkedKeys.checkedNodes.forEach(m => {
                    var obj = {
                        id: m.id,
                        name: m.name
                    }
                    this.selectZZJGIDList.push(obj)
                    this.selectZZJGNames += m.name + ","
                })


            },
            handleCheckChange(data, checked, indeterminate) {
                // console.log("选中机构节点1")
                //  console.log(data)
                //  console.log("选中机构节点2")
                //  console.log(checked)
                //  console.log("选中机构节点3")
                //  console.log(indeterminate)
            },


            getDataList() {
                if (this.selectZZJGIDList == null || this.selectZZJGIDList.length == 0) {
                    this.$message({showClose: true, message: "请选择机构后查询", type: "error"});
                    return
                }
                this.selectZZJGIDList.forEach(m => {
                    this.queryDataObj.Hospitals.push(m.id);
                })

                var params = this.queryDataObj;
                console.log("请求查询传参");
                console.log(params);
                this.$post("/BI/getCWZTList", params)
                    .then(res => {
                        console.log("请求查询返回值");
                        console.log(res.data);
                        if (res.code == 0) {

                        } else {
                            this.$message({showClose: true, message: res.msg, type: "error"});
                        }
                    })
                    .catch(err => {
                        console.log(err);
                        this.$message({showClose: true, message: err, type: "error"});
                    });


            },
            formatDateTime(date, dt) {
                var nd = date
                nd = nd.valueOf()
                nd = nd + dt * 24 * 60 * 60 * 1000
                nd = new Date(nd)
                var y = nd.getFullYear()// 获取年
                var m = nd.getMonth() + 1// 获取月
                var d = nd.getDate()// 获取天
                var h = nd.getHours()// 获取小时
                var f = nd.getMinutes()// 获取分钟
                var s = nd.getSeconds()// 获取秒
                if (m <= 9) m = '0' + m
                if (d <= 9) d = '0' + d
                if (h <= 9) h = '0' + h
                if (f <= 9) f = '0' + f
                if (s <= 9) s = '0' + s
                // var cdate = y + '-'  + m +  '-'  + d + ' '  + h +  ':'  + f +  ':'  + s;
                var cdate = y + '-' + m + '-' + d
                return cdate

            },
            //
            init() {
                //
                var dom = document.getElementById("container");
                var myChart = echarts.init(dom);


                var dom4 = document.getElementById("container4");
                var myChart4 = echarts.init(dom4);


                //********************************************************************


                var dom7 = document.getElementById("container7");
                var myChart7 = echarts.init(dom7);


                //科室收入成本收益分析
                var optionYWSR = {
                    title: {
                        text: '科室收入成本收益分析',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['收入（万元）', '成本（万元）', '收益（万元）']
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            data: ['中医科', '肛肠科', '普外科', '骨外科', '神经内科', '心内科', '耳鼻喉科', '儿科', '妇产科', '检验科', '药房', '康复科']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '收入',
                            type: 'bar',
                            data: [6.0, 6.6, 8.0, 12.6, 16.6, 8.8, 18.6, 22.2, 19.8, 20.0, 16.6, 12.6],
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '成本',
                            type: 'bar',
                            data: [2.5, 3.6, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    {name: '最大值', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                                    {name: '最小值', value: 2.3, xAxis: 11, yAxis: 3}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '收益',
                            type: 'bar',
                            data: [3.5, 3.0, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                            markPoint: {
                                data: [
                                    {name: '最大值', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                                    {name: '最小值', value: 2.3, xAxis: 11, yAxis: 3}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                myChart.setOption(optionYWSR, true);//科室现有人员
                //256极速CT收入构成
                var optionCTSR = {
                    title: {
                        text: '256极速CT收入构成',
                        subtext: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    // legend: {
                    //   data:['得分']
                    // },
                    // toolbox: {
                    //   show : true,
                    //   feature : {
                    //     mark : {show: true},
                    //     dataView : {show: true, readOnly: false},
                    //     magicType: {show: true, type: ['line', 'bar']},
                    //     restore : {show: true},
                    //     saveAsImage : {show: true}
                    //   }
                    // },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        }
                    ],
                    yAxis: [
                        {
                            type: 'category',
                            data: ['CT检查', '西药房', '医用材料', '体检费', '检查费']
                        }
                    ],
                    series: [
                        {
                            name: '万元',
                            type: 'bar',
                            data: [61, 73, 81, 32, 56]
                            ,
                            itemStyle: {
                                normal: {
                                    //每根柱子颜色设置
                                    color: function (params) {
                                        let colorList = [
                                            "#c23531",
                                            "#2f4554",
                                            "#61a0a8",
                                            "#d48265",
                                            "#91c7ae",
                                            "#749f83",
                                            "#ca8622",
                                            "#bda29a",
                                            "#6e7074",
                                            "#546570",
                                            "#c4ccd3",
                                            "#4BABDE",
                                            "#FFDE76",
                                            "#E43C59",
                                            "#37A2DA"
                                        ];
                                        return colorList[params.dataIndex];
                                    }
                                }
                            }
                        }
                    ]
                };
                myChart4.setOption(optionCTSR, true);

                //*********************第二行****************************
                //本量利分析
                var option = {
                    title: {
                        text: '本量利分析',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b} : {c}'
                    },
                    legend: {
                        left: 'left',
                        data: ['收入', '固定成本','总成本']
                    },
                    xAxis: {
                        type: 'category',
                        name: 'x',
                        splitLine: {show: false},
                        data: ['0', '5', '15', '20', '25', '30', '35', '40', '45']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    yAxis: {
                        type: 'log',
                        name: 'y'
                    },
                    series: [
                        {
                            name: '收入',
                            type: 'line',
                            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
                        },
                        {
                            name: '固定成本',
                            type: 'line',
                            data: [1, 2, 4, 8, 16, 32, 64, 128, 256]
                        },
                        {
                            name: '总成本',
                            type: 'line',
                            data: [1/2, 1/4, 1/8, 1/16, 1/32, 1/64, 1/128, 1/256, 1/512]
                        }
                    ]
                };
                myChart7.setOption(option, true);




            }//界面加载完成后执行
        },
        mounted() {
            this.init();
        },
        watch:{
            selectZZJGNames:{
                handler(newVal, objVal) {
                    console.log("触发改变%%%%%%%%%%%%%%%%%%%55")
                    this.showTooltip()
                    this.getDataList()
                },
            }
        },
        created() {
            this.msg = this.$route.query;
            console.log("接收过来的传参#############################################################################")
            console.log(this.msg)
            if (this.msg.Token != null && this.msg.Token != "") {
                console.log("设置Token")
                this.$setToken(this.msg.Token)
                this.$setItemUrl(this.msg.ItemIP)
                var loginInfor = this.msg.loginInfor;
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor != null) {

                }
            } else {
                console.log("Token为空")
                var loginInfor = localStorage.getItem('LoginInfor');
                this.LoginInfor = JSON.parse(loginInfor);
                console.log("个人登录信息");
                console.log(this.LoginInfor);
                if (this.LoginInfor == null) {
                    this.LoginInfor = {
                        SectionName: "",
                        UserName: ""
                    }
                }
            }
            console.log("获取机构代码………………………………………………………………………………")
            this.ZZJGList = []
            this.ZZJGList.push(this.LoginInfor.HospitalTree)
            console.log(this.ZZJGList);
            if (this.ZZJGList.length > 0) {
                this.selectZZJGNames = this.LoginInfor.HospitalName + ","
                var obj = {
                    id: this.LoginInfor.HospitalId,
                    name: this.LoginInfor.HospitalName
                }
                this.selectZZJGIDList.push(obj)
                // this.$refs.treeJG.setCheckedKeys([obj.id]);
            }
            this.queryDataObj.BeginDate = this.formatDateTime(new Date(), -90); //挂号日期
            this.queryDataObj.EndDate = this.formatDateTime(new Date(), 0); //挂号日期

        }
    };
</script>
<style lang="scss">
    .NumbeRFMaintenMZZJJZ {
        .selectTime {
            .el-input__icon {
                height: 100%;
                width: 25px;
                display: none;
                text-align: center;
                -webkit-transition: all .3s;
                transition: all .3s;
                line-height: 40px;
            }

            .input {
                width: 90px !important;
                height: 28px !important;
            }


        }

        .ypList {
            .el-input__inner {
                height: 20px !important;
                padding: 0 0 0 15px !important;
            }

            .el-input__inner {
                -webkit-appearance: none;
                background-color: #FFF;
                background-image: none;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                color: #606266;
                display: inline-block;
                font-size: 10px !important;
                height: 40px;
                line-height: 40px;

                -webkit-transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
                width: 100%;
            }

            .el-autocomplete-suggestion li {
                padding: 0px 6px !important;
                margin: 0;
                line-height: 34px;
                cursor: pointer;
                color: #606266;
                font-size: 10px !important;
                list-style: none;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }

        .selectPic {
            ul {
                padding: 0;
                display: none;
            }
        }

        .camera_outer {
            position: relative;
            overflow: hidden;
            background: #0a1015;
            background-size: 100%;

            video, canvas, .tx_img {
                -moz-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                transform: scaleX(-1);
            }

            .btn_camera {
                position: absolute;
                bottom: 4px;
                left: 0;
                right: 0;
                height: 50px;
                background-color: rgba(0, 0, 0, 0.3);
                line-height: 50px;
                text-align: center;
                color: #ffffff;
            }

            .bg_r_img {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;
            }

            .img_bg_camera {
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                top: 0;

                img {
                    width: 100%;
                    height: 100%;
                }

                .img_btn_camera {
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    background-color: rgba(0, 0, 0, 0.3);
                    color: #ffffff;

                    .loding_img {
                        width: 50px;
                        height: 50px;
                    }
                }
            }
        }

        .Dilog {
            .column2 {
                width: 128rem;
                margin: 50px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .form-control {
                width: 96px !important;
            }
        }

        .DilogYP {
            .column2 {
                width: 680px;
                margin: 50px auto;
                background: #fff;
                border-radius: 5px;
                position: relative;
            }

            .form-control {
                width: 96px !important;
            }
        }

        .div_P {
            .form-control {
                display: inline-block;
                width: 12rem;
                height: 32px;
                padding: 5px 12px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            }

            .form-group {
                height: 45px;
                margin: 0;
                line-height: 32px;
                padding: 6px 15px 0 15px;
            }
        }

        .elRadioYygh {
            .column2 label {
                width: 52px !important;
            }

            .el-radio-button__inner {

                padding: 6px 11px;

            }
        }

        .fjtable {
            .el-table {
                font-size: 10px !important;
            }
        }

        .cardP {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardPdd {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 18px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }

            .el-card__body {
                padding: 2px;
            }
        }

        .cardPD {
            .text {
                font-size: 12px;
            }

            .el-card__header {
                padding: 8px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: azure;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }

        .cardC {
            .text {
                font-size: 14px;
            }

            .el-card__header {
                padding: 10px 20px;
                border-bottom: 1px solid #EBEEF5;
                -webkit-box-sizing: border-box;
                box-sizing: border-box;
                background-color: white;
            }

            .el-card__body {
                padding: 8px;
            }

            .item {
                margin-bottom: 18px;
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }

            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }
        }


        .el-tree-node.is-current > .el-tree-node__content {
            color: #fff;
            background: #155a00 !important;
        }

        .dRightMain {
            padding: 18px;
        }

        .custom-tree-node {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            padding-right: 8px;
        }

        .el-table {
            font-size: 14px !important;
        }

        .el-table thead {
            color: #303133;
        }

        .dRightMain .Tb {
            position: absolute;
            top: 91px;
            left: 240px;
            right: 15px;
            bottom: 0;
            border: 1px solid #ddd;
        }
    }

</style>
